<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>gallery</title>
  <meta name="description" content="gallery">
  <meta name="keywords" content="jquery, pagination, javascript, plugin" />
  <meta name="author" content="Luís Almeida">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/jPages.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/github.css">

  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/highlight.pack.js"></script>
  <script type="text/javascript" src="js/tabifier.js"></script>
  <script src="js/js.js"></script>
  <script src="js/jPages.js"></script>

  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28718218-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

  </script>

  <script>
  $(function() {

    /* initiate plugin */
    $("div.holder").jPages({
      containerID : "thumbs",
      perPage     : 5,
      previous    : ".prev",
      next        : ".next",
      links       : "blank",
      direction   : "auto",
      animation   : "fadeInUp"
    });

    $("ul#thumbs li").click(function(){
      $(this).addClass("selected")
      .siblings()
      .removeClass("selected");

      var img = $(this).children().clone().addClass("animated fadeInDown");
      $("div#img").html( img );

    });

  });
  </script>

  <style type="text/css">
  ul#thumbs { list-style: none; margin: 0px; padding:0px; margin-top: 10px; }
  ul#thumbs li { float: left; margin-right: 10px; cursor:pointer; }
  ul#thumbs li img { height: 75px; vertical-align: top; }
  ul#thumbs li.selected { outline: 3px solid #FF4242; }

  div#img img { width: 600px; height: 400px; }

  div#btns{ position:relative; width: 600px; }
  .prev, .next { width:29px; height:29px; position: absolute; top: -95px; cursor: pointer; }
  .prev { background-image: url('img/back.gif'); left: -40px; }
  .next { background-image: url('img/next.gif'); right: -40px; }

  .jp-disabled{ display:none; }
  </style>

</head>
<body>

<div id="author">You can follow me on <a href="https://twitter.com/lmgalmeida">@twitter</a> or <a href="https://github.com/luis-almeida">@github</a> and you may also like <a href="http://luis-almeida.github.com/filtrify/">filtrify</a></div>

<div id="container" class="clearfix">

  <div id="sidebar">
        <h1 id="header">jPages</h1>
        <ul id="menu">
            <li><a href="http://luis-almeida.github.com/jPages/">Info</a></li>
          <li><a href="documentation.html">documentation</a></li>

            <li><a href="download.html">download</a></li>
    </ul>

    <h2>Examples</h2>
    <ul>
      <li><a href="defaults.html">defaults</a></li>
        <li><a href="pagination.html">pagination</a></li>
            <li><a href="itemsperpage.html">items per page</a></li>
      <li><a href="customizebuttons.html">customize buttons</a></li>
            <li><a href="custombuttons.html">custom buttons</a></li>
      <li><a href="blanklinks.html">blank links</a></li>
            <li><a href="titlelinks.html">title links</a></li>
      <li><a href="keybrowse.html">key browse</a></li>
            <li><a href="scrollbrowse.html">scroll browse</a></li>
      <li><a href="auto.html">auto</a></li>
      <li><a href="direction.html">direction</a></li>
      <li><a href="cssanimation.html">css animation</a></li>
            <li><a href="jqueryanimation.html">jQuery animation</a></li>
      <li><a href="callback.html">callback</a></li>
            <li><a href="jumptopage.html">jump to page</a></li>
            <li><a href="destroy.html">destroy</a></li>
            <li><a href="lazyload.html">lazy load</a></li>
    </ul>

        <h2>Demos</h2>
        <ul>
      <li><a href="mosaic.html">mosaic</a></li>
            <li class="selected"><a href="gallery.html">gallery</a></li>
            <li><a href="table.html">table</a></li>
    </ul>

        <div class="share">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://luis-almeida.github.com/jPages/" data-text="jPages" data-via="lmgalmeida" data-hashtags="jQuery">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </div>

  </div> <!--! end of #sidebar -->

  <div id="content" class="defaults">

    <h2>Gallery</h2>

        <!-- big image -->
        <div id="img" class="animated"><img src="img/gallery/1.jpg"></div>

        <!-- item container -->
        <ul id="thumbs" class="clearfix">
            <li class="selected"><img src="img/gallery/1.jpg" alt="image"></li><li><img src="img/gallery/2.jpg" alt="image"></li><li><img src="img/gallery/3.jpg" alt="image"></li><li><img src="img/gallery/4.jpg" alt="image"></li><li><img src="img/gallery/5.jpg" alt="image"></li><li><img src="img/gallery/6.jpg" alt="image"></li><li><img src="img/gallery/7.jpg" alt="image"></li><li><img src="img/gallery/8.jpg" alt="image"></li><li><img src="img/gallery/9.jpg" alt="image"></li><li><img src="img/gallery/10.jpg" alt="image"></li><li><img src="img/gallery/11.jpg" alt="image"></li><li><img src="img/gallery/12.jpg" alt="image"></li><li><img src="img/gallery/13.jpg" alt="image"></li><li><img src="img/gallery/14.jpg" alt="image"></li>
        </ul>

        <!-- navigation holder -->
        <div class="holder"></div>

        <!-- custom buttons -->
        <div id="btns">
            <span class="prev"></span>
            <span class="next"></span>
        </div>

  </div> <!--! end of #content -->
</div> <!--! end of #container -->

<a href="http://github.com/luis-almeida"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>

</body>
</html>
